<template>
  <!-- 面包屑 -->
  <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
      <a href="/">网格地图管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>百度地图</el-breadcrumb-item>
  </el-breadcrumb>

  <div class="common-layout">
      <el-container>
      <el-aside width="200px" style="border: 1px solid #ccc; margin: 20px 3px; padding: 20px;">
          <el-input
              v-model="filterText"
              class="w-60 mb-2"
              placeholder="Filter keyword"
          />

          <el-tree
              ref="treeRef"
              style="max-width: 600px"
              class="filter-tree"
              :data="AreaInfo"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              @node-Click="nodeClick"
          />
      </el-aside>
      <!-- 地图 -->
      <el-main>
          <baidu-map class="bm-view" :zoom="12" :center="{lng: 116.404, lat: 39.915}" >
          </baidu-map>
      </el-main>
      </el-container>
  </div>
 
</template>

<script lang="ts" setup>
    import { ref, watch ,onMounted} from 'vue'
    import { ElMessage, type TreeInstance } from 'element-plus'
    import axios from 'axios'

    interface Tree {
        [key: string]: any
    }

    const filterText = ref('')
    const treeRef = ref<TreeInstance>()

    const defaultProps = {
        children: 'Children',
        label: 'Area_Name',
        id:"Id"
    }

    watch(filterText, (val) => {
        treeRef.value!.filter(val)
    })

    const filterNode = (value: string, data: Tree) => {
        if (!value) return true
        return data.Area_Name.includes(value)
    }

    //区域响应式数据
    const AreaInfo = ref([]);
    onMounted(()=>{
        GetAreaTree();
    })

    //加载区域数据
    const GetAreaTree=()=>{
        axios.get("http://localhost:5247/api/Area/GetAreaTree")
        .then(res=>{
            AreaInfo.value=res.data.Data;
        })
    }
    //点击事件
    const nodeClick=(AreaInfo:any)=>{
        ElMessage.success("您选择的节点是："+AreaInfo.Area_Name);
    }

</script>





<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

